<template>
  <div id="forget">
    <h1>验证码登录</h1>
    <el-form ref="loginFormRef" :rules="loginFormRules" :model="form" class="form">
      <el-form-item class="formItem" prop="mail">
        <el-input v-model="form.mail" placeholder="请输入管理员邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item class="formItem mailSend" prop="code">
        <el-input style="flex: 2;margin-right: .5rem;" v-model="form.code" placeholder="请输入验证码"></el-input>
        <el-button style="flex: 1;" type="primary" @click="sendCheckMail">发送验证码</el-button>
      </el-form-item>
      <el-form-item class="formItem">
        <el-button type="primary" @click="login" @keydown.enter="login">登录</el-button>
      </el-form-item>
    </el-form>
    <div id="toLogin" @click="toLogin">密码登录</div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { useRouter } from "vue-router"
import { ElNotification, ElMessageBox } from 'element-plus'
import Cookies from 'js-cookie'
const router = useRouter()
// 验证码登录数据
const form = reactive({
  mail: null,
  code: null,
})
// 跳转到 邮箱 / 密码 登录页
const toLogin = () => {
  router.push({
    path: '/login'
  })
}
// 发送验证码事件
const sendCheckMail = () => {
  let data = {
    mail: form.mail
  }
  proxy.$api.sendCheckCodeMail(data)
    .then(res => {
      if (res.data.status != -1) {
        ElNotification({
          title: res.data.message,
          type: 'success'
        })
      } else {
        ElNotification({
          title: res.data.message,
          type: 'error'
        })
      }
    })
}
const loginFormRef = ref()
const loginFormRules = ref({
  mail: [{ required: true, message: '请输入管理员邮箱', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})
// 登录事件
const login = async () => {
  await loginFormRef.value.validate((valid) => {
    if (valid) {
      proxy.$api.adminLoginByCheckCode(form)
      .then(res => {
        if (res.data.status) {
          Cookies.set('token', res.data.token, { expires: 1 }) // 将token存入cookie
          ElMessageBox.alert('点击确定进入后台', "登录成功", {
            type: 'success',
            confirmButtonText: 'OK',
            callback: () => {
              router.push({
                path: '/'
              }) // 跳转到首页
            }
          })
        } else {
          ElNotification({
            title: '验证码错误，请重试',
            type: 'error'
          })
        }
      })
    } else {
      ElNotification({
        title: '请完善登录信息',
        type: 'error'
      })
    }
  })

}
const keyDownCallBack = (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    return login()
  }
}
onMounted(() => {
  // 添加enter的登录监听事件
  document.addEventListener('keydown', keyDownCallBack, true)
})
onUnmounted(() => {
  // 解除enter的登录监听绑定
  document.removeEventListener('keydown', keyDownCallBack, true)
})
</script>

<style lang="scss" scoped>
#forget {
  width: 30%;
  max-height: 30%;
  min-height: 20rem;
  min-width: 20rem;
  border: 1px solid black;
  border-radius: 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
}

h1 {
  flex: 1;
  width: 100%;
  font-size: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mailSend {
  display: flex;
}

#toLogin {
  position: absolute;
  bottom: -2rem;
  right: 2.2rem;
  font-size: 1.5rem;
  cursor: pointer;
}
</style>

<style scoped>
/deep/.form {
  flex: 3;
  display: flex;
  flex-direction: column;
}

/deep/.formItem {
  flex: 1;
  width: 80%;
  margin: 0 auto;
}

/deep/.el-button {
  margin: 0 auto;
  display: block;
}
</style>